<template>
  <div class="container">
    <!--标题部分-->
    <div class="title">
      <div class="title-left">
        <img src="../../public/static/img/菱形.png" alt="" />
        <div class="title-Style">乡村环境</div>
      </div>
      <div class="title-right">详细数据</div>
    </div>
    <!--图表部分-->
    <div class="body">
      <div class="body-left">
        <div class="chart" ref="zhuzhuangtu"></div>
        <div class="pm">
          <div>pm2.5</div>
          <div class="pm-item">
            <img src="../../public/static/img/pm2.5.png" alt="" />
            <div class="pm-item-text">20.0</div>
          </div>
        </div>
      </div>
      <div class="body-right">
        <div class="right-title">气温监测</div>
        <div class="right-middle">
          <img src="../../public/static/img/多云.png" alt="" />
          <div class="pm-item-text">
            <div>多 云</div>
            <div>19℃</div>
          </div>
        </div>
        <div class="right-bottom">
          <div
            class="right-bottom-content"
            v-for="(item, index) in weather"
            :key="index"
          >
            <div>{{ item.date }}</div>
            <img src="../../public/static/img/下雨.png" alt="" />
            <div>{{ item.temperature }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "VillageGeneral",
  data() {
    return {
      chartInstance: null,
      img: "../../public/static/img/下雨.png",
      weather: [
        {
          date: "5月21日明天\xa0",
          img: "../../public/static/img/下雨.png",
          temperature: "\xa031℃/23℃",
        },
        {
          date: "5月21日明天\xa0",
          img: "../../public/static/img/下雨.png",
          temperature: "\xa031℃/23℃",
        },
        {
          date: "5月21日明天\xa0",
          img: "../../public/static/img/下雨.png",
          temperature: "\xa031℃/23℃",
        },
      ],
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.zhuzhuangtu);
      const option = {
        title: {
          text: "污水检测",
          left: 5,
          textStyle: {
            color: "#ffffff",
            fontSize: 14,
            fontWeight: "normal",
          },
        },
        color: ["#f3e92a"],
        series: [
          {
            data: [120, 200, 150, 80],
            type: "bar",
            itemStyle: {
              barBorderRadius: [10, 10, 10, 10],
            },
            barWidth: 10,
          },
        ],
        xAxis: {
          type: "category",
          // show:false
          axisLine: {
            lineStyle: {
              color: "#f3e92a",
              width: 10,
              cap: "butt",
            },
          },
        },
        yAxis: {
          type: "value",
          show: false,
        },
        grid: [
          {
            left: "10%",
            bottom: "10%",
            top: "18%",
            right: "10%",
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(165, 181, 199, 0.2);
  border: 1px solid;
  border: #3c3f41;
}

.title {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
}

.title-left {
  width: 55%;
  color: #ffffff;
  margin-left: 5px;
  background-color: rgba(42, 132, 165, 0.7);
  border-radius: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
}

.title-Style {
  margin-left: 8px;
}
.title-right {
  position: absolute;
  color: #ffffff;
  font-size: 13px;
  width: 30%;
  background-color: rgba(42, 132, 165, 0.7);
  border-radius: 5px;
  float: right;
  right: 1%;
  text-align: center;
}

.body {
  display: flex;
  height: calc(100% - 40px);
  width: 95%;
  align-items: center;
  justify-items: center;
  /*background-color: #795da3;*/
  margin-left: 2.5%;
}

.body-left {
  width: 45%;
  height: 100%;
  /*background-color: #9a6e3a;*/
}
.chart {
  height: 60%;
}
.pm {
  color: #ffffff;
  margin-left: 10px;
  font-size: 14px;
  margin-top: 10px;
}
.pm-item {
  display: flex;
  margin-left: 10%;
  margin-top: 5%;
}
.pm-item-text {
  color: #ffffff;
  font-size: 19px;
  margin-left: 10%;
  margin-top: 5%;
}

.body-right {
  width: 55%;
  height: 100%;
}
.right-title {
  /*margin-top: 5px;*/
  margin-left: 15px;
  color: #ffffff;
  font-size: 14px;
}
.right-middle {
  width: 100%;
  height: 45%;
  display: flex;
  align-items: center;
  justify-items: center;
  margin-left: 10%;
  margin-top: 3%;
}
.right-bottom {
  /*margin-top: 10px;*/
  width: 100%;
  height: 45%;
  /*background-color: #0077aa;*/
}

.right-bottom-content {
  color: #ffffff;
  display: flex;
  font-size: 13px;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
